<!--
1. 路由通过children进行嵌套
2. 在子组件中如果还有子组件，也要用<router-view>占位
3. 路由名称中的 / 符号 要注意
-->


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
    <script src="../lib/vue-router.js"></script>
</head>
<body>
    <div id="app">
        <router-link to="/account">account</router-link>
        <router-view></router-view>
    </div>


    <template id="tmp">
        <div>
            <h1>这是account组件</h1>
            <router-link to="/login">登录</router-link>
            <router-link to="/register">注册</router-link>
            <router-view></router-view>
        </div>
    </template>
    <script>

        var account={
            template:"#tmp"
        };

        var login={
            template: "<h1>登录</h1>"
        };

        var register={
            template:"<h2>注册</h2>"
        };

        var router=new VueRouter({
            routes:[
                {
                    path:'/account',
                    component:account,
                    children:[
                        {path:'/login',component: login},
                        {path:'/register',component: register}
                    ]
                },
            ]
        });

        var vm=new Vue({
            el:"#app",
            data:{

            },
            methods:{

            },
            router:router
        })
    </script>
</body>
</html>